html{
    height:100%;
    width:100%;
}
.app{
    height:100%;
    width:100%;
    /*background:url('../img/bg/bg6.png') no-repeat;*/
    background-size: 100% 100%;
    padding:0;
    margin:0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
.flex-column{
    display:-moz-box;
    display: -webkit-box;
    display: box;
    display:-webkit-flex;
    display:flex;
    flex-direction: column;
    align-items: center;  
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}
.ceng{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
    /*background-color:rgba(0, 3, 12,0.46);*/
    background-color: #E0EAF7;
    align-items: center;
    justify-content: center;
   
}
.content_bottom{
    height:30%;
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    background-color: #317BEF;
}
header{
    height:100px;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-box-flex-group: 1;
    order: 1;
    width:100%;
    vertical-align: middle;
    line-height:100px;
    display:flex;
    flex-direction: row;
    border:1px solid red;
}
header > img{
    width:60px;
    display: inline-block;
    align-self: center;
    -webkit-box-align: center;
    vertical-align:middle;
}
header > span{
    align-self: center;
    -webkit-box-align: center;
    line-height:60px;
    display:inline-block;
    font-size:60px;
    margin-left:10px;
    vertical-align:middle;
    font-family:"lss","微软雅黑", "Dosis", sans-serif;  
    /**color:#fefefe;**/
    color:#5069ab;
    text-shadow:
    0px 1px 0px #9fa1a7,
    0px 6px 6px rgba(111, 153, 252, 0.2);
    letter-spacing: 5px;
    
}
header> i{
    float:left;
    color:#5069ab;
    font-size:22px;
    background-color: #fff;
    padding:10px;
    border-radius: 5px;;
    cursor: pointer;
}
header>i::after{
    content:'返回';
    padding-left:10px;
    font-family:"lss","微软雅黑", "Dosis", sans-serif;  
}
header>i:hover{
    background:#738dd4;
    color:#fff;
}
header > span::after{
    content:'V1.0';
    font-size:22px;
}
footer{
    height:40px;
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-box-flex-group: 3;
    order: 3;
    width:100%;
}
.contentMain{
    background:url('../img/bg/bgnew.png') no-repeat;
    background-size: 100% 100%;
    width:90%;
    height:90VH;
    display:flex;
    flex-direction: column;
}
.content{
   /* -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-box-flex-group: 2;
    order: 2;*/
    flex:1;
    width:100%;

    display:-moz-box;
    display: -webkit-box;
    display: box;
    display:-webkit-flex;
    display:flex;
    flex-direction: row;
    align-items: center;  
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
   /* justify-content: center;*/
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    padding:20px;
  
}
.content_1{
    justify-content: center;
}
.item{
    width:120px;
    /*margin-left:3%;*/
    padding:15px;
    border-radius: 5px;
    background:url('../img/icon/mod1.png') no-repeat;
    background-size: 100% 100%;
    z-index:100;
    height:160px;
    /*height:240px;*/
}
.item_warp{
    width:100%;
   
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: pointer;
    height:120px;
    display:flex;
    flex-direction: column;
    overflow: hidden;
}
.item_warp:hover{
   /*background-color:rgb(0, 0, 0,0.1);*/
   
}

.item .img{
    flex:1;
    width:100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 10px;
    text-align:center;
    vertical-align: middle;

}
.item .img img{
    width:100px;
    vertical-align: middle;

}
.item .img i{
    color:#61abff;
    font-size:60px;
    line-height:60px;
    margin-top:5%;
    
}
.item .itemx{
    height:30px;
    width:100%;
    text-align:center;
    color:#000031;
    font-weight: bold;
    margin-top:10px;
    cursor: pointer;
    font-size:16px;
    margin-top:25%;

}
.item1 img:hover{
   /* background: rgba(0, 147, 255, 1) no-repeat;*/
}
.item2 img:hover{
  /*  background: rgba(0, 147, 255, 1) no-repeat;*/
}
.item3 img:hover{
   /* background: rgba(0, 147, 255, 1) no-repeat;*/
}
.item1{
    
    /*background:rgb(0, 0, 0,0.2);*/
   /* background: linear-gradient(135deg,#56c8ff,#6f99fc) no-repeat;*/
}
.item1:hover{
   /* background: rgb(12, 103, 168) no-repeat;*/
}
.item2:hover{
   /* background: rgb(12, 103, 168) no-repeat;*/
}
.item3:hover{
   /* background: rgb(12, 103, 168) no-repeat;*/
}
.item4:hover{
   /* background: rgb(12, 103, 168) no-repeat;*/
}
.item22{
    background:linear-gradient(to right, #bb313e25, #bb313e25, #d7222925, #dd4a1625, #e4761525, #f5c50025, #f0e92725, #b1ce2425, #48a93525, #03944525, #157c4f25, #176a5825, #1b556325, #1d386f25, #1d386f25, #20277825, #52266325, #8a244b25);
}
.item2{
    
    /*background:rgb(0, 0, 0,0.2);*/
    /*
    background: linear-gradient(#f0a98a, #eb7168);*/
}
.item3{
    
    /*background:rgb(0, 0, 0,0.2);*/
    /*
    background: linear-gradient(135deg,#91cbe9,#6f99fc) ;*/
}
.item4{
    
   /* background:rgb(0, 0, 0,0.2);*/
      /*background: linear-gradient(135deg,#ecce7b,#f7a64a) ;*/
}
.item5{
    /*background: linear-gradient(135deg,#ec7b81,#f14747) ;*/
}
.item6{
    
  /*  background: linear-gradient(#ffe233, #fc8c54);*/
}
.headers{
    width:100%;
    display: flex;
    flex-direction: row;
    padding:20px;
    padding-right:20px;
    box-sizing: border-box;
    height:40px;
}
.custom{
    flex:1;
}
.custom img{
    width:28px;
}
.user{
    position: absolute;
    right:5%;
    top:55%;
}
.user span{
   /* position: absolute;
    right:20px;
    top:0;
    color:#5069ab;*/
    color:#fff;
}
.user i{
    color:rgba(54, 135, 225, 1);
}
.user img{
    vertical-align: middle;
}
.titles2{
    position: relative;
    text-align:center;
    width:100%;
    color:#356ced;
    font-size:0.4rem;
    font-family: PingFangSC-Regular, PingFang SC;
    position: relative;
    font-weight: bold;
    padding-top:3%;
}
.titles2 img{
    width:62px;
    vertical-align: middle;
    margin-right:8px;
}
.bottom{
    height:30px;
    padding:10px;
    font-size:12px;
    text-align:center;
    width:100%;
    color:rgba(223, 223, 223, 1);
}